<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CallBack</title>
</head>
<style>
    .num {
        font-size: 30px;
    }
</style>

<body>
    <div class="num">start</div>
    <script>
        function callPromise(num) {
            return new Promise(function (resolve, reject) {
                setTimeout(function () {
                    resolve(num * 2), 2000
                })
            })
        }
        callPromise(5)
            .then((res) => {
                console.log(res)
                let div = document.querySelector(".num")
                div.innerHTML = res
            })




        function calcArea(borderWidth, timeout) {
            return new Promise(function (res, rej) {
                setTimeout(() => {
                    if (typeof borderWidth === "number" && borderWidth > 0)
                        res(borderWidth * borderWidth)
                    else rej(new Error("borderWidth is invalid"))
                }, timeout);

            })
        }

        async function asyncCalc() {
            const start = new Date()
            console.log(start)
            let are1 = await calcArea(5, 1000)
            const time1 = new Date()
            console.log(time1)
            console.log("area1", are1)
            let are2 = await calcArea(25, 3000)
            const time2 = new Date()
            console.log(time2)
            console.log("area2", are2)
            let sum = are1 + are2
            console.log("sum", sum)
        }
        // asyncCalc()
        
        console.log(new Date())
        Promise.all([
            calcArea(2, 10000),
            calcArea(2, 1000),
            calcArea(2, 3000),
            calcArea(2, 6000),
            calcArea(2, 13000)
        ]).then(res =>
            {console.log(res)
            console.log(new Date())
            }
        )
    </script>
</body>

</html>